<!DOCTYPE html>
<html>
<head>
<title>Clement-Desormes Apparatus</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: #fff;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="520"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // Set drawing styles
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineCap = 'round';

  // --- Bottle (G) ---
  ctx.lineWidth = 2.5;
  ctx.beginPath();
  const bottleCenterX = 280;
  const bottleBottomY = 420;
  const bottleWidth = 170;
  const bottleBodyHeight = 180;
  const bottleNeckWidth = 60;
  const bottleNeckHeight = 30;
  const bottleShoulderY = bottleBottomY - bottleBodyHeight;
  const bottleTopY = bottleShoulderY - bottleNeckHeight;
  const rimWidth = bottleNeckWidth + 10;
  const rimHeight = 8;
  const topOfRimY = bottleTopY - rimHeight;

  // Draw bottle body and neck
  ctx.moveTo(bottleCenterX - bottleWidth / 2, bottleBottomY);
  ctx.lineTo(bottleCenterX - bottleWidth / 2, bottleShoulderY + 20);
  ctx.quadraticCurveTo(bottleCenterX - bottleWidth / 2, bottleShoulderY, bottleCenterX - bottleNeckWidth / 2, bottleShoulderY);
  ctx.lineTo(bottleCenterX - bottleNeckWidth / 2, bottleTopY);

  ctx.moveTo(bottleCenterX + bottleWidth / 2, bottleBottomY);
  ctx.lineTo(bottleCenterX + bottleWidth / 2, bottleShoulderY + 20);
  ctx.quadraticCurveTo(bottleCenterX + bottleWidth / 2, bottleShoulderY, bottleCenterX + bottleNeckWidth / 2, bottleShoulderY);
  ctx.lineTo(bottleCenterX + bottleNeckWidth / 2, bottleTopY);
  
  // Draw bottom
  ctx.moveTo(bottleCenterX - bottleWidth / 2, bottleBottomY);
  ctx.lineTo(bottleCenterX + bottleWidth / 2, bottleBottomY);

  // Draw rim
  ctx.moveTo(bottleCenterX - rimWidth / 2, topOfRimY);
  ctx.quadraticCurveTo(bottleCenterX, topOfRimY - 5, bottleCenterX + rimWidth / 2, topOfRimY);
  
  ctx.stroke();
  
  // Stopper
  ctx.beginPath();
  ctx.moveTo(bottleCenterX - rimWidth / 2, topOfRimY);
  ctx.lineTo(bottleCenterX + rimWidth / 2, topOfRimY);
  ctx.stroke();


  // --- Shading Lines ---
  ctx.lineWidth = 1;
  // Left shoulder shading
  ctx.beginPath();
  ctx.moveTo(220, 250);
  ctx.quadraticCurveTo(230, 260, 240, 275);
  ctx.moveTo(230, 245);
  ctx.quadraticCurveTo(240, 255, 250, 270);
  ctx.stroke();

  // Side shading
  ctx.beginPath();
  ctx.moveTo(bottleCenterX - bottleWidth / 2 + 8, 280);
  ctx.lineTo(bottleCenterX - bottleWidth / 2 + 8, 380);
  ctx.moveTo(bottleCenterX - bottleWidth / 2 + 15, 280);
  ctx.lineTo(bottleCenterX - bottleWidth / 2 + 15, 380);
  
  ctx.moveTo(bottleCenterX + bottleWidth / 2 - 8, 280);
  ctx.lineTo(bottleCenterX + bottleWidth / 2 - 8, 380);
  ctx.moveTo(bottleCenterX + bottleWidth / 2 - 15, 280);
  ctx.lineTo(bottleCenterX + bottleWidth / 2 - 15, 380);
  ctx.stroke();

  // Label G
  ctx.font = "bold 30px serif";
  ctx.textAlign = 'center';
  ctx.fillText("G", bottleCenterX, 330);

  // --- Stopcock (H) ---
  ctx.lineWidth = 2.5;
  const tapBaseY = topOfRimY;
  const tapHeight = 30;
  const tapY = tapBaseY - tapHeight;

  // Vertical part of tap
  ctx.beginPath();
  ctx.moveTo(bottleCenterX, tapBaseY);
  ctx.lineTo(bottleCenterX, tapY);
  ctx.stroke();

  // Handle of tap
  ctx.beginPath();
  ctx.moveTo(bottleCenterX - 20, tapY);
  ctx.lineTo(bottleCenterX + 20, tapY);
  // Ends of handle
  ctx.moveTo(bottleCenterX - 20, tapY - 5);
  ctx.lineTo(bottleCenterX - 20, tapY + 5);
  ctx.moveTo(bottleCenterX + 20, tapY - 5);
  ctx.lineTo(bottleCenterX + 20, tapY + 5);
  ctx.stroke();
  
  // --- Manometer (M, h) ---
  ctx.lineWidth = 3;
  ctx.lineJoin = 'round';

  ctx.beginPath();
  const tubeOutX = 315; // Starting from the side of the stopper
  const tubeOutY = 175;
  ctx.moveTo(tubeOutX, tubeOutY);
  ctx.lineTo(400, tubeOutY); // horizontal part
  ctx.lineTo(400, 380); // vertical down part
  ctx.arc(380, 380, 20, 0, Math.PI, true); // U-bend
  ctx.lineTo(360, 250); // vertical up part
  ctx.stroke();


  // --- Labels ---
  ctx.font = "bold 28px serif";
  ctx.textAlign = 'center';
  
  // Label H
  ctx.fillText("H", bottleCenterX - 45, tapY + 10);
  
  // Label M
  ctx.fillText("M", 380, 425);
  
  // Label h
  ctx.font = "italic bold 28px serif";
  ctx.fillText("h", 430, 300);

  // --- Figure Caption ---
  ctx.font = "20px Times, 'Times New Roman', serif";
  ctx.textAlign = 'center';
  ctx.fillText("Fig. 1.4.", 300, 480);

</script>
</body>
</html>